var t = function(t, i, h) {
    var s = t.x, e = t.y, r = t.w, a = t.h, o = t.type, n = t.text, c = t.fontSize, x = void 0 === c ? 20 : c, p = t.color, l = void 0 === p ? "black" : p, f = t.url;
    if ("text" === o) {
        i.setFontSize(x);
        var d = i.measureText(this.text).width / 2, g = (x + 10) / 2;
        this.x = s + d, this.y = e + g;
    } else this.x = s, this.y = e;
    this.w = r, this.h = a, this.fileUrl = f, this.text = n, this.fontSize = x, this.color = l, 
    this.ctx = i, this.rotate = 0, this.type = o, this.selected = !0, this.factor = h, 
    this.MIN_WIDTH = 50, this.MIN_FONTSIZE = 10;
};

t.prototype = {
    paint: function() {
        if (this.ctx.save(), "text" === this.type && (this.ctx.setFontSize(this.fontSize), 
        this.ctx.setTextBaseline("middle"), this.ctx.setTextAlign("center"), this.ctx.setFillStyle(this.color)), 
        this.centerX = "text" === this.type ? this.x : this.x + this.w / 2, this.centerY = "text" === this.type ? this.y : this.y + this.h / 2, 
        this.ctx.translate(this.centerX, this.centerY), this.ctx.rotate(this.rotate * Math.PI / 180), 
        this.ctx.translate(-this.centerX, -this.centerY), "text" === this.type ? this.ctx.fillText(this.text, this.x, this.y) : "image" === this.type && this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h), 
        this.selected) if (this.ctx.setLineDash([ 0, 0 ]), this.ctx.setLineWidth(1), this.ctx.setStrokeStyle("lightgray"), 
        this.ctx.lineDashOffset = 10, "text" === this.type) {
            var t = this.ctx.measureText(this.text).width, i = this.fontSize + 10, h = t / 2, s = i / 2, e = this.x - h, r = this.y - s;
            this.ctx.strokeRect(e, r, t, i), this.ctx.drawImage("./icon/close.png", e - 15, r - 15, 30, 30), 
            this.ctx.drawImage("./icon/scale.png", e + t - 15, r + i - 15, 30, 30);
        } else this.ctx.strokeRect(this.x, this.y, this.w, this.h), this.ctx.drawImage("./icon/close.png", this.x - 15, this.y - 15, 30, 30), 
        this.ctx.drawImage("./icon/scale.png", this.x + this.w - 15, this.y + this.h - 15, 30, 30);
        this.ctx.restore();
    },
    isInGraph: function(t, i) {
        var h = "text" === this.type ? this.ctx.measureText(this.text).width : this.w, s = "text" === this.type ? this.fontSize + 10 : this.h, e = "text" === this.type ? this.x - h / 2 : this.x, r = "text" === this.type ? this.y - s / 2 : this.y, a = this._getTransform(e, r, this.rotate - this._getAngle(this.centerX, this.centerY, e, r)).x - 15, o = this._getTransform(e, r, this.rotate - this._getAngle(this.centerX, this.centerY, e, r)).y - 15, n = "text" === this.type ? this.x + h / 2 : this.x + h, c = "text" === this.type ? this.y + s / 2 : this.y + s, x = this._getTransform(n, c, this.rotate + this._getAngle(this.centerX, this.centerY, n, c)).x - 15, p = this._getTransform(n, c, this.rotate + this._getAngle(this.centerX, this.centerY, n, c)).y - 15, l = "text" === this.type ? this.x - h / 2 : this.x, f = "text" === this.type ? this.y - s / 2 : this.y;
        return t - x >= 0 && i - p >= 0 && x + 30 - t >= 0 && p + 30 - i >= 0 ? "transform" : t - a >= 0 && i - o >= 0 && a + 30 - t >= 0 && o + 30 - i >= 0 ? "del" : t - l >= 0 && i - f >= 0 && l + h - t >= 0 && f + s - i >= 0 && "move";
    },
    _getAngle: function(t, i, h, s) {
        var e = h - t, r = s - i, a = e / Math.sqrt(Math.pow(e, 2) + Math.pow(r, 2)), o = Math.acos(a);
        return 180 / (Math.PI / o);
    },
    _getTransform: function(t, i, h) {
        var s = Math.PI / 180 * h, e = Math.sqrt(Math.pow(t - this.centerX, 2) + Math.pow(i - this.centerY, 2)), r = Math.sin(s) * e, a = Math.cos(s) * e;
        return {
            x: this.centerX + a,
            y: this.centerY + r
        };
    },
    transform: function(t, i, h, s, e) {
        "text" === this.type && this.ctx.setFontSize(this.fontSize);
        var r = "text" === this.type ? this.x : this.x + this.w / 2, a = "text" === this.type ? this.y : this.y + this.h / 2, o = t - r, n = i - a, c = h - r, x = s - a, p = Math.atan2(n, o) / Math.PI * 180, l = Math.atan2(x, c) / Math.PI * 180;
        this.rotate = e.rotate + l - p;
        var f = Math.sqrt(Math.pow(r - t, 2) + Math.pow(a - i, 2)), d = Math.sqrt(Math.pow(r - h, 2) + Math.pow(a - s, 2));
        if ("image" === this.type) {
            var g = e.w + (d - f), u = e.h + (d - f);
            this.w = g <= this.MIN_WIDTH ? this.MIN_WIDTH : g, this.h = u <= this.MIN_WIDTH ? this.MIN_WIDTH : u, 
            g > this.MIN_WIDTH && u > this.MIN_WIDTH && (this.x = e.x - (d - f) / 2, this.y = e.y - (d - f) / 2);
        } else if ("text" === this.type) {
            var y = e.fontSize * ((d - f) / f + 1);
            this.fontSize = y <= this.MIN_FONTSIZE ? this.MIN_FONTSIZE : y;
        }
    },
    _drawRadiusRect: function(t, i, h, s, e) {
        var r = e / 2;
        this.ctx.beginPath(), this.ctx.moveTo(this.toPx(t + r), this.toPx(i)), this.ctx.lineTo(this.toPx(t + h - r), this.toPx(i)), 
        this.ctx.arcTo(this.toPx(t + h), this.toPx(i), this.toPx(t + h), this.toPx(i + r), this.toPx(r)), 
        this.ctx.lineTo(this.toPx(t + h), this.toPx(i + s - r)), this.ctx.arcTo(this.toPx(t + h), this.toPx(i + s), this.toPx(t + h - r), this.toPx(i + s), this.toPx(r)), 
        this.ctx.lineTo(this.toPx(t + r), this.toPx(i + s)), this.ctx.arcTo(this.toPx(t), this.toPx(i + s), this.toPx(t), this.toPx(i + s - r), this.toPx(r)), 
        this.ctx.lineTo(this.toPx(t), this.toPx(i + r)), this.ctx.arcTo(this.toPx(t), this.toPx(i), this.toPx(t + r), this.toPx(i), this.toPx(r));
    },
    toPx: function(t) {
        return t * this.factor;
    }
}, Component({
    properties: {
        graph: {
            type: Object,
            value: {},
            observer: "onGraphChange"
        },
        bgColor: {
            type: String,
            value: ""
        },
        bgImage: {
            type: String,
            value: ""
        },
        width: {
            type: Number,
            value: 750
        },
        height: {
            type: Number,
            value: 750
        }
    },
    data: {},
    attached: function() {
        var t = wx.getSystemInfoSync().screenWidth;
        this.factor = t / 750, void 0 === this.drawArr && (this.drawArr = []), this.ctx = wx.createCanvasContext("canvas-label", this), 
        this.draw();
    },
    methods: {
        toPx: function(t) {
            return t * this.factor;
        },
        onGraphChange: function(i, h) {
            "{}" !== JSON.stringify(i) && (this.drawArr.push(new t(Object.assign({
                x: 30,
                y: 30
            }, i), this.ctx, this.factor)), this.draw());
        },
        draw: function() {
            var t = this;
            return "" !== this.data.bgImage && this.ctx.drawImage(this.data.bgImage, 0, 0, this.toPx(this.data.width), this.toPx(this.data.height)), 
            "" !== this.data.bgColor && (this.ctx.save(), this.ctx.setFillStyle(this.data.bgColor), 
            this.ctx.fillRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height)), 
            this.ctx.restore()), this.drawArr.forEach(function(t) {
                t.paint();
            }), new Promise(function(i) {
                t.ctx.draw(!1, function() {
                    i();
                });
            });
        },
        start: function(t) {
            var i = this, h = t.touches[0], s = h.x, e = h.y;
            if (this.tempGraphArr = [], this.drawArr && this.drawArr.forEach(function(t, h) {
                t.selected = !1;
                var r = t.isInGraph(s, e);
                r && ("del" === r ? (i.drawArr.splice(h, 1), i.ctx.clearRect(0, 0, i.toPx(i.data.width), i.toPx(i.data.height)), 
                i.ctx.draw()) : "transform" !== r && "move" !== r || (t.action = r, i.tempGraphArr.push(t), 
                i.currentTouch = {
                    x: s,
                    y: e
                }));
            }), this.tempGraphArr.length > 0) {
                var r = this.tempGraphArr.length - 1;
                this.tempGraphArr[r].selected = !0, this.currentGraph = Object.assign({}, this.tempGraphArr[r]);
            }
            this.draw();
        },
        move: function(t) {
            var i = t.touches[0], h = i.x, s = i.y;
            if (this.tempGraphArr && this.tempGraphArr.length > 0) {
                var e = this.tempGraphArr[this.tempGraphArr.length - 1];
                "move" === e.action ? (e.x = this.currentGraph.x + (h - this.currentTouch.x), e.y = this.currentGraph.y + (s - this.currentTouch.y)) : "transform" === e.action && e.transform(this.currentTouch.x, this.currentTouch.y, h, s, this.currentGraph), 
                this.draw();
            }
        },
        end: function(t) {
            this.tempGraphArr = [];
        },
        export: function() {
            var t = this;
            return new Promise(function(i, h) {
                t.drawArr = t.drawArr.map(function(t) {
                    return t.selected = !1, t;
                }), t.draw().then(function() {
                    wx.canvasToTempFilePath({
                        canvasId: "canvas-label",
                        success: function(t) {
                            i(t.tempFilePath);
                        },
                        fail: function(t) {
                            h(t);
                        }
                    }, t);
                });
            });
        },
        changColor: function(t) {
            var i = this.drawArr.filter(function(t) {
                return t.selected;
            });
            i.length > 0 && (i[0].color = t), this.draw();
        },
        changeBgColor: function(t) {
            this.data.bgImage = "", this.data.bgColor = t, this.draw();
        },
        changeBgImage: function(t) {
            this.data.bgColor = "", this.data.bgImage = t, this.draw();
        }
    }
});